<template>
	<view class="p30">
		<view class="fw size-35">
			账户注销后无法恢复,请谨慎操作,注销前请检查以下事项
		</view>
		<view class="fw size-22 mt-20" style="">
			1.注销账号前，请先关闭钱包自动续费功能，并将钱包账户的余额全部体现。
		</view>
		<view class="fw size-22 mt-20" style="">
			2.您的账号中如果有未售出的藏品，无法注销。
		</view>
		<view class="fw size-22 mt-20" style="">
			3.账号注销后，账户下的订单记录无法找回，昵称丶头像丶钱包地址等个人信息均会被删除。
		</view>
		<view class="fw size-22 mt-20" style="">
			4.注销后，该账号无法登录。
		</view>

		<view class="ouaccount">
			<view class="mb-10">
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox shape="circle" @change="checkboxChange" v-model="item.checked"
						v-for="(item, index) in list" :key="index" :name="item.name">{{item.name}}</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="" @click="submitUser()" style="">
				<u-button hover-class="none" class="custom-style" style="color: #FFF;" :style="{background:bg}"
					:hair-line="false" :disabled='bool'>确认注销
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				bool: false,
				bg: ' linear-gradient(to right, #CDCDCD, #BEBEBE)',
				list: [{
					name: '我已阅读并知晓，愿意承担注销账户带来的后果。',
					checked: false,
					disabled: false
				}, ],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
			}
		},
		onShow() {
		 
		},
		methods: {
			// 
			tex(){
				this.$http('api/user/user_out', {
				}).then(res => {
					console.log(res);
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				// console.log(e.value);
				if (e.value) {
					this.bg = "linear-gradient(to right, #606060, #2B2B2B)"
					this.bool = true
					console.log(this.bool, this.bg, "开");

				} else {
					this.bg = "linear-gradient(to right, #CDCDCD, #BEBEBE)"
					this.bool = false
					console.log(this.bool, this.bg, "关");

				}
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			submitUser() {
				uni.showModal({
					content: '确定要注销吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
                            this.tex()
						} else if (res.cancel) {
							console.log('用户点击取消');
							 
						}
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.custom-style {
		color: #FFF;

	}

	page {
		background-color: #FAFAFA;
	}

	::v-deep  .u-checkbox__label {
		font-size: 12px;
		font-weight: bold;
		color: #000;
	}

	.u-field {
		// color: #fff;
	}

	.ouaccount {
		width: 90%;
		height: 100rpx;
		border-radius: 20rpx;
		position: fixed;
		bottom: 6%;
		left: 5%;
		text-align: center;


	}

	.accountcAncellation {
		// background-image: linear-gradient(to right, #606060, #2B2B2B);
		border-radius: 12px;
		height: 100Rpx;
		line-height: 100Rpx;
		color: #FFF;
	}
</style>
